<template>
  <view class="history-page">
    <!-- 顶部栏 -->
    <view class="history-header-bar">
      <uv-icon
        name="arrow-left"
        size="28"
        color="#fff"
        class="history-back"
        @click="goBack"
      />
      <text class="history-title">演练历史</text>
      <uv-icon name="more-circle" size="28" color="#fff" class="history-menu" />
    </view>
    <!-- 筛选区 -->
    <view class="history-filter-card history-filter-card-search">
      <view class="search-input-wrapper">
        <uv-input
          placeholder="请输入关键字搜索"
          border="surround"
          v-model="searchValue"
          @change="change"
          @confirm="search"
        ></uv-input>
        <uv-icon 
          v-if="searchValue" 
          name="close-circle-fill" 
          size="20" 
          color="#ccc" 
          class="clear-icon"
          @click="clearSearch"
        ></uv-icon>
      </view>
      <uv-button text="搜索" type="primary" @click="search"></uv-button>
    </view>
    <view class="history-filter-card">
      <view class="img-tab-bar">
        <view
          v-for="(tab, idx) in imgTabs"
          :key="tab.value"
          :class="['img-tab-item', imgTabIndex === idx ? 'active' : '']"
          @click="selectImgTab(idx)"
        >
          {{ tab.label }}
          <view v-if="imgTabIndex === idx" class="img-tab-underline"></view>
        </view>
      </view>
    </view>
    <!-- 历史卡片列表 -->
    <view class="history-list" v-if="imgTabIndex === 0">
      <view class="history-card" v-for="item in historyList" :key="item.id" @click="getInterviewDetail(item.id)">
        <view class="history-card-row1">
          <text class="history-date">{{ item.date }}</text>
          <view class="history-score">
           
            <text>{{ item.score }}分</text>
          </view>
        </view>
        <view class="history-card-row3">
          <view class="history-card-title">{{ item.title }} </view>
          <view class="history-actions" @click.stop>
            <uv-icon
              :name="item.isFav ? 'star-fill' : 'star'"
              :color="item.isFav ? '#ffaa00' : '#e0e0e0'"
              size="28"
              class="history-star"
              @click="toggleFav(item.id)"
            />

            <uv-icon
              name="trash"
              color="#e0e0e0"
              size="28"
              class="history-action"
              @click="deleteHistory(item.id)"
            />
          </view>
        </view>
        <view class="history-card-row2">
          <view class="history-tag">{{ item.tag }} </view>
          <view class="history-meta">
            <uv-icon
              name="list-dot"
              color="#b2e6e0"
              size="20"
              style="margin-right: 4rpx"
            />
            <text>{{ item.count }}个问题</text>
            <text class="history-dot">·</text>
            <uv-icon
              name="clock"
              color="#b2e6e0"
              size="20"
              style="margin-right: 4rpx"
            />
            <text>{{ item.time }}分钟</text>
          </view>
        </view>
       
      </view>
    </view>
    <scroll-view 
      v-if="imgTabIndex === 1" 
      class="history-list" 
      scroll-y 
      @scrolltolower="loadMoreQuestions"
      :refresher-enabled="true"
      :refresher-triggered="myQuestionLoading"
      @refresherrefresh="refreshQuestions"
    >
      <view class="history-card" v-for="item in myQuestionList" :key="item.id">
        <view class="history-card-row1">
          <text class="history-date">{{ item.date }}</text>
          <view class="history-meta">
           
           <text>{{ item.score }}分</text>
         </view>
        
        </view>
        <view class="history-card-title">{{ item.title }}
          <uv-icon
            :name="item.isFav ? 'star-fill' : 'star'"
            :color="item.isFav ? '#ffaa00' : '#e0e0e0'"
            size="28"
            class="history-star"
            @click="toggleQuestionFav(item)"
          />
        </view>
        <view class="history-card-row2">
          <view class="history-tag">{{ item.tag }}</view>
          <view class="history-card-row3">
          <view
            class="history-actions"
            style="width: 100%; justify-content: space-between"
          >
            <uv-icon
              name="trash"
              color="#e0e0e0"
              size="28"
              class="history-action"
              @click="deleteQuestion(item)"
            />
            <uv-icon
              :name="item.expanded ? 'arrow-up' : 'arrow-down'"
              color="#e0e0e0"
              size="28"
              class="history-action"
              @click="toggleExpand(item.id)"
            />
          </view>
        </view>
        </view>
      
        <!-- 展开内容放在每个卡片内部 -->
        <view v-if="item.expanded" class="my-question-detail">
          <view class="my-answer-block">
            <view class="my-answer-title">我的回答：</view>
            <view class="my-answer-content">
              {{ item.userAnswer || '暂无回答内容' }}
            </view>
          </view>
          <view class="ai-analysis-block">
            <view class="ai-analysis-title">
              <uv-icon
                name="photo"
                color="#3ad6b6"
                size="22"
                style="margin-right: 6rpx"
              />
              AI分析评估
            </view>
            <view class="ai-analysis-row">
              <view class="ai-analysis-col">
                <view class="ai-analysis-label">答题策略</view>
                <view class="ai-analysis-content">
                  {{ item.aiStrategy || '暂无策略分析' }}
                </view>
              </view>
            </view>
            <view class="ai-analysis-row">
              <view class="ai-analysis-col">
                <view class="ai-analysis-label">优点</view>
                <view class="ai-analysis-content">
                  {{ item.advantage || '暂无优点分析' }}
                </view>
              </view>
              <view class="ai-analysis-col">
                <view class="ai-analysis-label">不足</view>
                <view class="ai-analysis-content">
                  {{ item.deficiency || '暂无不足分析' }}
                </view>
              </view>
            </view>
            <view class="ai-analysis-row">
              <view class="ai-analysis-col" style="flex: 1">
                <view class="ai-analysis-label">改进建议</view>
                <view class="ai-analysis-content">
                  {{ item.improvementSuggestion || '暂无改进建议' }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 加载状态 -->
      <view v-if="myQuestionLoading" class="loading-container">
        <uv-loading-icon mode="circle" size="24" color="#3ad6b6"></uv-loading-icon>
        <text class="loading-text">加载中...</text>
      </view>
      
      <!-- 没有更多数据 -->
      <view v-if="!myQuestionHasMore && myQuestionList.length > 0" class="no-more-container">
        <text class="no-more-text">没有更多数据了</text>
      </view>
      
      <!-- 空数据状态 -->
      <view v-if="!myQuestionLoading && myQuestionList.length === 0" class="empty-container">
        <uv-icon name="file-text" size="80" color="#ccc"></uv-icon>
        <text class="empty-text">
          {{ searchValue ? '未找到相关问题' : '暂无问题记录' }}
        </text>
        <text class="empty-desc">
          {{ searchValue ? '尝试其他关键词或清空搜索条件' : '去参加面试练习，生成你的问题记录吧' }}
        </text>
        <uv-button 
          v-if="searchValue" 
          type="primary" 
          size="small" 
          @click="clearSearch"
          style="margin-top: 20rpx;"
        >
          清空搜索
        </uv-button>
      </view>
    </scroll-view>
    <uv-tabbar
      :value="tabValue"
      @change="tabChange"
      activeColor="#4ECDC4"
      style="width: 100%"
    >
      <uv-tabbar-item text="模拟面试" icon="play-circle"></uv-tabbar-item>
      <uv-tabbar-item text="演练面试" icon="reload"></uv-tabbar-item>
      <uv-tabbar-item text="我的信息" icon="account"></uv-tabbar-item>
    </uv-tabbar>
  </view>
</template>

<script>
import {queryRecord, toggleCollect,interviewDelete,questionQuery,questionToggleCollect,questionDelete} from '@/api/interview'
export default {
  data() {
    return {
      industry: '',
      position: '',
      positionIndex: 0,
      // 查询参数
      pageIndex: 1,
      pageSize: 10,
      startDate: '',
      endDate: '',
      orderBy: 'default',
      tabOptions: ['全部', '已收藏', '最近一周', '高分记录'],
      tabIndex: 0,
      historyList: [
        
      ],
      tabValue: 1,
      imgTabs: [
        { label: '演练历史', value: 0 },
        { label: '我的问题', value: 1 }
      ],
      imgTabIndex: 0,
      myQuestionList: [],
      // 懒加载相关状态
      myQuestionLoading: false,
      myQuestionHasMore: true,
      myQuestionPageIndex: 1,
      myQuestionPageSize: 10,
      searchValue: '',
      searchTimer: null,  // 防抖定时器
      // 数据缓存状态
      myQuestionDataLoaded: false,  // 是否已加载过数据
      myQuestionLastLoadTime: null,  // 最后加载时间
      myQuestionCacheExpire: 5 * 60 * 1000  // 缓存过期时间（5分钟）
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    getHistoryList() {
      // 组装查询参数
      const params = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        industryId: this.industry ? parseInt(this.industry) : undefined,
        postId: this.position ? parseInt(this.position) : undefined,
        startDate: this.startDate || undefined,
        endDate: this.endDate || undefined,
        orderBy: this.orderBy
      }
      queryRecord(params).then(res => {
        const records = res && res.data && Array.isArray(res.data.records) ? res.data.records : []
        this.historyList = records.map(r => ({
          id: r.id,
          date: r.createTime,
          title: r.postName,
          tag: r.industryName,
          count: r.questionCount,
          time: r.time,
          score: typeof r.totalScore === 'number' ? r.totalScore : 0,
          isFav: !!r.isCollect
        }))
      }).catch(err => {
        console.error('获取历史记录失败:', err)
        uni.showToast({ title: err.message || '获取失败', icon: 'error' })
      })
    },
    toggleFav(id) {
      const item = this.historyList.find((h) => h.id === id)
      if (!item) return
      const action = item.isFav ? 'uncollect' : 'collect'
      toggleCollect({ interviewId: id, action }).then(() => {
        item.isFav = !item.isFav
        uni.showToast({ title: item.isFav ? '已收藏' : '已取消', icon: 'success' })
        this.getHistoryList()
      }).catch(err => {
        console.error('收藏操作失败:', err)
        uni.showToast({ title: err.message || '操作失败', icon: 'error' })
      })
    },
    deleteHistory(id) {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这条面试记录吗？',
        success: (res) => {
          if (res.confirm) {
            interviewDelete( id ).then(() => {
              uni.showToast({ title: '删除成功', icon: 'success' });
              this.getHistoryList();
            }).catch(err => {
              uni.showToast({ title: err.message || '删除失败', icon: 'error' });
            });
          }
        }
      });
    },
    selectIndustry(val) {
      this.industry = val
    },
    selectPosition(val) {
      this.position = val
    },
    tabChange(index) {
      this.tabValue = index
      if (index === 0) {
        uni.navigateTo({ url: '/pages/interview' })
      } else if (index === 1) {
        uni.navigateTo({ url: '/pages/practiceHistory' })
      } else if (index === 2) {
        uni.navigateTo({ url: '/pages/profile' })
      }
    },
    selectImgTab(idx) {
      this.imgTabIndex = idx
      // 当点击"我的问题"tab时，检查是否需要加载数据
      if (idx === 1) {
        this.checkAndLoadQuestionData()
      }
    },
    
    // 检查并加载问题数据
    checkAndLoadQuestionData() {
      const now = Date.now()
      const isDataEmpty = this.myQuestionList.length === 0
      const isDataExpired = this.myQuestionLastLoadTime && 
                           (now - this.myQuestionLastLoadTime) > this.myQuestionCacheExpire
      
      // 如果数据为空或已过期，则加载数据
      if (isDataEmpty || isDataExpired) {
        console.log('加载问题数据 - 原因:', isDataEmpty ? '数据为空' : '数据已过期')
        this.getMyQuestionList(true)
      } else {
        console.log('使用缓存的问题数据')
      }
    },
    toggleExpand(id) {
      const item = this.myQuestionList.find((q) => q.id === id)
      if (item) item.expanded = !item.expanded
    },
    // 获取我的问题列表
    getMyQuestionList(isRefresh = false) {
      if (this.myQuestionLoading) return
      
      this.myQuestionLoading = true
      
      // 如果是刷新，重置页码
      if (isRefresh) {
        this.myQuestionPageIndex = 1
        this.myQuestionHasMore = true
      }
      
      const params = {
        pageIndex: this.myQuestionPageIndex,
        pageSize: this.myQuestionPageSize,
        name: this.searchValue
      }
      
      questionQuery(params).then(res => {
        // 根据实际返回的数据结构，数据直接在 res.data.list 中
        const questions = res && res.data && Array.isArray(res.data.list) ? res.data.list : []
        const newQuestions = questions.map(q => ({
          id: q.questionId || q.id,
          dialogId: q.dialogId,
          date: q.createTime,
          title: q.question,
          tag: q.postName,
          score: typeof q.majorScore === 'number' ? q.majorScore : 0,
          isFav: !!q.isCollect,
          expanded: false,
          // 保存完整的原始数据，用于展开时显示详细信息
          userAnswer: q.userAnswer,
          advantage: q.advantage,
          deficiency: q.deficiency,
          improvementSuggestion: q.improvementSuggestion,
          aiStrategy: q.aiStrategy
        }))
        
        if (isRefresh) {
          // 刷新时替换数据
          this.myQuestionList = newQuestions
        } else {
          // 加载更多时追加数据
          this.myQuestionList = [...this.myQuestionList, ...newQuestions]
        }
        
        // 判断是否还有更多数据
        this.myQuestionHasMore = questions.length >= this.myQuestionPageSize
        
        // 如果还有更多数据，页码+1
        if (this.myQuestionHasMore) {
          this.myQuestionPageIndex++
        }
        
        // 记录数据加载状态和时间
        this.myQuestionDataLoaded = true
        this.myQuestionLastLoadTime = Date.now()
        
      }).catch(err => {
        console.error('获取我的问题失败:', err)
        uni.showToast({ title: err.message || '获取失败', icon: 'error' })
      }).finally(() => {
        this.myQuestionLoading = false
      })
    },
    
    // 搜索功能
    search() {
      // 如果当前在"我的问题"tab，则搜索问题
      if (this.imgTabIndex === 1) {
        this.searchQuestions()
      } else {
        // 如果在"演练历史"tab，则搜索历史记录
        this.searchHistory()
      }
    },
    
    // 搜索问题
    searchQuestions() {
      // 重置分页状态
      this.myQuestionPageIndex = 1
      this.myQuestionHasMore = true
      this.myQuestionList = []
      
      // 重置缓存状态（搜索会改变数据）
      this.myQuestionDataLoaded = false
      this.myQuestionLastLoadTime = null
      
      // 执行搜索
      this.getMyQuestionList(true)
      
      // 显示搜索提示
      if (this.searchValue.trim()) {
        uni.showToast({
          title: `搜索"${this.searchValue}"`,
          icon: 'none',
          duration: 1500
        })
      }
    },
    
    // 搜索历史记录
    searchHistory() {
      // 这里可以添加历史记录的搜索逻辑
      // 目前先显示提示
      uni.showToast({
        title: '历史记录搜索功能待开发',
        icon: 'none'
      })
    },
    
    // 输入框变化处理
    change(value) {
      console.log('搜索内容变化:', value)
      
      // 清除之前的定时器
      if (this.searchTimer) {
        clearTimeout(this.searchTimer)
      }
      
      // 如果输入为空，立即清空搜索结果
      if (!value || !value.trim()) {
        this.clearSearch()
        return
      }
      
      // 设置防抖，500ms后自动搜索
      this.searchTimer = setTimeout(() => {
        // 只在"我的问题"tab时自动搜索
        if (this.imgTabIndex === 1) {
          this.searchQuestions()
        }
      }, 500)
    },
    
    // 清空搜索
    clearSearch() {
      // 清除防抖定时器
      if (this.searchTimer) {
        clearTimeout(this.searchTimer)
        this.searchTimer = null
      }
      
      this.searchValue = ''
      
      // 如果当前在"我的问题"tab，重新加载数据
      if (this.imgTabIndex === 1) {
        this.searchQuestions()
      }
    },
    
    // 切换问题收藏状态
    toggleQuestionFav(item) {
      console.log('切换问题收藏状态:', item)
      if (!item || !item.id) {
        uni.showToast({
          title: '操作失败',
          icon: 'error'
        })
        return
      }
      
      const action = item.isFav ? 'uncollect' : 'collect'
      const params = {
        dialogId: item.dialogId,
        action: action
      }
      
      questionToggleCollect(params).then(res => {
        // 更新本地状态
        item.isFav = !item.isFav
        
        // 显示成功提示
        uni.showToast({
          title: item.isFav ? '已收藏' : '已取消收藏',
          icon: 'success',
          duration: 1500
        })
      }).catch(err => {
        console.error('收藏操作失败:', err)
        uni.showToast({
          title: err.message || '操作失败',
          icon: 'error'
        })
      })
    },
    
    // 删除问题
    deleteQuestion(item) {
      if (!item || !item.dialogId) {
        uni.showToast({
          title: '删除失败',
          icon: 'error'
        })
        return
      }
      
      // 显示确认对话框
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这个问题记录吗？删除后无法恢复。',
        confirmText: '删除',
        confirmColor: '#ff4757',
        success: (res) => {
          if (res.confirm) {
            this.performDeleteQuestion(item)
          }
        }
      })
    },
    
    // 执行删除问题
    performDeleteQuestion(item) {
      const params = {
        dialogId: item.dialogId
      }
      
      questionDelete(params).then(res => {
        // 从本地列表中移除该项目
        this.myQuestionList = this.myQuestionList.filter((q) => q.dialogId !== item.dialogId)
        
        // 更新缓存状态（删除操作改变了数据）
        this.myQuestionLastLoadTime = Date.now()
        
        // 显示成功提示
        uni.showToast({
          title: '删除成功',
          icon: 'success',
          duration: 1500
        })
      }).catch(err => {
        console.error('删除问题失败:', err)
        uni.showToast({
          title: err.message || '删除失败',
          icon: 'error'
        })
      })
    },
    
    // 加载更多问题
    loadMoreQuestions() {
      if (this.myQuestionHasMore && !this.myQuestionLoading) {
        this.getMyQuestionList(false)
      }
    },
    
    // 刷新问题列表
    refreshQuestions() {
      // 强制刷新，忽略缓存
      this.myQuestionDataLoaded = false
      this.myQuestionLastLoadTime = null
      this.getMyQuestionList(true)
    },
    
    // 强制刷新问题数据（忽略缓存）
    forceRefreshQuestions() {
      console.log('强制刷新问题数据')
      this.refreshQuestions()
    },
    
    // 获取面试详情
    getInterviewDetail(detailId) {
    
          
          // 可以选择跳转到详情页面
          uni.navigateTo({
            url: `/pages/practiceMode?detailId=${detailId}`
          })
    },
    
     
  },
  mounted() {
    this.getHistoryList()
  }
}
</script>

<style scoped lang="scss">
@import '@/uni.scss';
.history-page {
  min-height: 100vh;
  background: #f8f8f8;
  padding-bottom: 32rpx;
  box-sizing: border-box;
}
.history-header-bar {
  background: #3ad6b6;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24rpx;
  height: 90rpx;
  position: sticky;
  top: 0;
  z-index: 10;
}
.history-title {
  font-size: 32rpx;
  font-weight: bold;
}
.history-filter-card {
  background: #fff;
  border-radius: 18rpx;
  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);
  padding: 32rpx 24rpx 24rpx 24rpx;
  margin: 24rpx 0 18rpx 0;
  width: 92%;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
}
.history-filter-card-search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16rpx;
}

.search-input-wrapper {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.clear-icon {
  position: absolute;
  right: 12rpx;
  z-index: 10;
  cursor: pointer;
}
.history-filter-row {
  display: flex;
  gap: 18rpx;
  margin-bottom: 18rpx;
}
.history-picker {
  flex: 1;
  background: #f8fafd;
  border-radius: 12rpx;
  border: 1px solid #e0e0e0;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.history-picker-inner {
  font-size: 26rpx;
  color: #333;
  text-align: center;
}
.history-tabs {
  display: flex;
  gap: 12rpx;
  margin-bottom: 8rpx;
  margin-top: 8rpx;
}
.history-tab {
  background: #e6f7f6;
  color: #3ad6b6;
  border-radius: 32rpx;
  font-size: 24rpx;
  padding: 8rpx 22rpx;
  cursor: pointer;
  transition: all 0.2s;
}
.history-tab.active {
  background: #3ad6b6;
  color: #fff;
}
.history-list {
  width: 92%;
  margin: 0 auto;
  height: calc(100vh - 200rpx); /* 设置固定高度以支持滚动 */
}
.history-card {
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
  padding: 24rpx 18rpx 18rpx 18rpx;
  display: flex;
  flex-direction: column;
  gap: 10rpx;
  border-left: 8rpx solid #4ecdc4;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 12px;
  &:active {
    transform: scale(0.98);
    box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.1);
  }
}
.history-card-row1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6rpx;
}
.history-date {
  font-size: 22rpx;
  color: #888;
}
.history-star {
  cursor: pointer;
  display: inline-block;
}
.history-card-title {
  font-size: 28rpx;
  color: #222;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.history-card-row2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8rpx;
}
.history-tag {
  background: #eafaf3;
  color: #3ad6b6;
  border-radius: 12rpx;
  font-size: 20rpx;
  padding: 4rpx 14rpx;
}
.history-meta {
  display: flex;
  align-items: center;
  color: #888;
  font-size: 22rpx;
}
.history-dot {
  margin: 0 8rpx;
}
.history-card-row3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.history-score {
  display: flex;
  align-items: center;
  color: #ffaa00;
  font-size: 24rpx;
  font-weight: bold;
}
.history-actions {
  display: flex;
  align-items: center;
  gap: 18rpx;
}
.history-action {
  cursor: pointer;
}
.img-tab-bar {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  background: #fff;
}
.img-tab-item {
  flex: 1;
  text-align: center;
  font-size: 28rpx;
  color: #888;
  padding: 6rpx 0 10rpx 0;
  position: relative;
  cursor: pointer;
  transition: color 0.2s;
}
.img-tab-item.active {
  color: #3ad6b6;
  font-weight: bold;
}
.img-tab-underline {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 60rpx;
  height: 6rpx;
  background: #3ad6b6;
  border-radius: 3rpx;
}
.my-question-detail {
  background: #eafaf3;
  border-radius: 12rpx;
  margin-top: 16rpx;
  padding: 18rpx 14rpx;
  font-size: 24rpx;
}
.my-answer-block {
  border-radius: 8rpx;
  padding: 12rpx;
  margin-bottom: 14rpx;
}
.my-answer-title {
  color: #3ad6b6;
  font-weight: bold;
  margin-bottom: 6rpx;
}
.my-answer-content {
  color: #333;
}
.ai-analysis-block {
  background: #fff;
  border-radius: 8rpx;
  padding: 12rpx;
}
.ai-analysis-title {
  color: #3ad6b6;
  font-weight: bold;
  margin-bottom: 8rpx;
  display: flex;
  align-items: center;
}
.ai-analysis-row {
  display: flex;
  gap: 12rpx;
  margin-bottom: 8rpx;
}
.ai-analysis-col {
  flex: 1;
  border-radius: 8rpx;
  padding: 8rpx;
}
.ai-analysis-label {
  color: #3ad6b6;
  font-weight: bold;
  margin-bottom: 4rpx;
}
.ai-analysis-content {
  color: #333;
  font-size: 22rpx;
}

/* 懒加载相关样式 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40rpx 0;
  gap: 16rpx;
}

.loading-text {
  font-size: 24rpx;
  color: #999;
}

.no-more-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx 0;
}

.no-more-text {
  font-size: 24rpx;
  color: #ccc;
}

.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80rpx 40rpx;
  text-align: center;
}

.empty-text {
  font-size: 28rpx;
  color: #666;
  margin: 20rpx 0 10rpx 0;
}

.empty-desc {
  font-size: 24rpx;
  color: #999;
  line-height: 1.5;
}
</style>
